<template>
	<view>
		
		<view class="card-view top-card">
			<view class="info-row">
				<view class="name">服务时间</view>
				<view class="value">{{detailData.serviceTime || ''}}</view>
			</view>
			<view class="info-row">
				<view class="name">服务地址</view>
				<view class="value">{{detailData.visitorAddress}}</view>
			</view>
			<view class="info-row">
				<view class="name">就诊人</view>
				<view class="value">{{detailData.visitor}}</view>
			</view>
			<view class="info-row">
				<view class="name">联系人</view>
				<view class="value">{{detailData.contactName}}</view>
			</view>
			<view class="info-row">
				<view class="name">联系电话</view>
				<view class="value">{{detailData.contactPhone}}</view>
			</view>
			<view class="info-row">
				<view class="name">预约项目</view>
				<view class="value">{{serviceItem}}</view>
			</view>
			<view class="more-row">
				<view class="more-btn">
					查看更多
					<image src="../../static/item_go_1.png" style="width:24rpx;height: 24rpx;"></image>
				</view>
			</view>
		</view>
		
		<view class="card-view last-card">
			<template v-for="(item,index) in questionList">
				<view class="evaluate-row" v-if="item.questionType === '单选'">
					<view class="name">{{item.questionName}}</view>
					<view class="value">
						<picker :range="item.questions" @change="onPickerChange($event,item)">
							<view class="picker-item">
								<view v-if="!item.questionAnswer">请选择</view>
								<view v-else>{{item.questionAnswer}}</view>
								<uni-icons type="right"></uni-icons>
							</view>
						</picker>
					</view>
				</view>
				<view class="checkbox-view" v-if="item.questionType === '多选'">
					<view class="top">
						<view class="name">{{item.questionName}}</view>
						<view class="value">
							<uni-icons type="right"></uni-icons>
						</view>
					</view>
					<checkbox-group v-model="item.questionAnswer" @change="onCheckBoxChange($event,item)">
						<view class="checkbox-group-view">
							<view v-for="qitem in item.questions">
								<checkbox :value="qitem">{{qitem}}</checkbox>
							</view>
						</view>
					</checkbox-group>
				</view>
				<view class="evaluate-row" v-if="item.questionType === '填空'">
					<view class="name">{{item.questionName}}</view>
					<view class="value">
						<input 
							placeholder="请填写" 
							placeholder-class="placeholder-class" 
							v-model="item.questionAnswer"/>
					</view>
				</view>
			</template>
		</view>
		<view style="height: 1rpx;"></view>
		
		<view class="bottom-view">
			<view class="line-btn" @click="refuse">拒绝</view>
			<view class="submit-btn" @click="submit">提交</view>
		</view>
		
		
	</view>
</template>

<script>
	import * as orderInfo from '../../common/api/orderInfo.js'
	import * as orderNurseAssessInfo from '../../common/api/orderNurseAssessInfo.js'
	export default {
		data() {
			return {
				uid:'',
				detailData:{},
				serviceItem:'',
				questionList:[],
				form:{
					uid:'',
					orderUid:'',
					orderNum:'',
					assessInfos:[]
				}
			}
		},
		onLoad(opt) {
			if(opt.uid){
				this.uid = opt.uid
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			getData(){
				const param = {
					uid:this.uid
				}
				orderInfo.queryById(param).then(result => {
					this.detailData = result.data.data
					this.setServiceItem()
					this.init()
				}).catch(error => {
					console.log(error);
				})
			},
			setServiceItem(){
				const list = this.detailData.itemInfos || []
				this.serviceItem = list.map(e => e.serviceItem).join(',')
			},
			init(){
				this.questionList = this.detailData.uestionItemInfos
			},
			onCheckBoxChange(e,item){
				this.$set(item,'questionAnswer',e.detail.value)
			},
			onPickerChange(e,item){
				const list = item.questions || []
				const index = e.detail.value || 0
				this.$set(item,'questionAnswer', list[index])
			},
			initForm(){
				this.form.orderUid = this.detailData.uid
				this.form.orderNum = this.detailData.orderNum
				this.form.assessInfos = []
				const list = this.questionList || []
				list.forEach(e => {
					let questionAnswer = e.questionAnswer
					if(e.questionType === '多选'){
						if(questionAnswer){
							questionAnswer = questionAnswer.join(',')
						}
					}
					this.form.assessInfos.push({
						questionName:e.questionName,
						questionType:e.questionType,
						questionAnswer:questionAnswer,
					})
				})
			},
			checkForm(){
				const list = this.form.assessInfos
				for(const item of list){
					if(!item.questionAnswer){
						uni.showToast({
							title:item.questionName+'不能为空',
							icon:'none'
						})
						return false
					}
				}
				return true
			},
			submit(){
				this.initForm()
				console.log(JSON.stringify(this.form))
				if(!this.checkForm()){
					return
				}
				const param = Object.assign({},this.form)
				console.log(param)
				orderNurseAssessInfo.insertBatch(param).then(result => {
					uni.showToast({
						title:result.data.msg,
						icon:'none'
					})
					uni.navigateBack()
				}).catch(error => {
					console.log(error);
				})
			},
			refuse(){
				uni.showModal({
					title: '提示',
					content: '确认拒绝？',
					success:(res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							const param = {
								uid:this.uid,
								status:'已拒绝'
							}
							orderInfo.update(param).then(result => {
								uni.navigateBack()
							}).catch(error => {
								console.log(error);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.card-view{
	background: white;
	padding: 0rpx 30rpx;
	box-sizing: border-box;
}

.top-card{
	
}

.info-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 100rpx;
	border-bottom: solid 2rpx #F8F8F8;
	.name{
		width: 150rpx;
		font-size: #232323;
		font-weight: 28rpx;
		font-weight: bold;
	}
	.value{
		color: rgba(35,35,35,0.8);
		font-size: 28rpx;
	}
}

.more-row{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80rpx;
	color: rgba(35,35,35,0.4);
	font-size: 26rpx;
}

.last-card{
	margin-top: 20rpx;
	margin-bottom: 150rpx;
	box-sizing: border-box;
	padding: 30rpx;
}
.evaluate-row{
	display: flex;
	align-items: center;
	min-height: 100rpx;
	border-bottom: solid 2rpx #F8F8F8;
	.name{
		width: 150rpx;
		font-size: #232323;
		font-weight: 28rpx;
		font-weight: bold;
	}
	.value{
		color: rgba(35,35,35,0.8);
		font-size: 28rpx;
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: flex-end;
	}
	.picker-item{
		color: rgba(136, 136, 136, 0.8);
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}
	input{
		text-align: right;
	}
}
.placeholder-class{
	color: rgba(136, 136, 136, 0.8);
	font-size: 28rpx;
}
.bottom-view{
	position: fixed;
	bottom: 0;
	width: 100%;
	background: white;
	display: flex;
	padding: 14rpx 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	
	.line-btn{
		width: 250rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: solid 2rpx #2EB0D9;
		color: #2EB0D9;
		border-radius: 40rpx;
	}
	.submit-btn{
		background: #2EB0D9;
		color: white;
		width: 420rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 40rpx;
	}
	
}



.checkbox-view{
	display: flex;
	flex-direction: column;
	min-height: 100rpx;
	border-bottom: solid 2rpx #F8F8F8;
	.top{
		display: flex;
		align-items: center;
		.name{
			width: 150rpx;
			font-size: #232323;
			font-weight: 28rpx;
			font-weight: bold;
		}
		.value{
			color: rgba(35,35,35,0.8);
			font-size: 28rpx;
			display: flex;
			align-items: center;
			flex: 1;
			justify-content: flex-end;
		}
	}
	
	.checkbox-group-view{
		margin-top: 20rpx;
	}

}
</style>
